# 需求管理页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

后台管理系统需要提供需求管理功能，让管理员能够查看、搜索、筛选和管理系统中的所有需求。需求来源于客户提交或从线索转化而来，管理员需要能够快速查找特定需求，查看需求的详细信息（包括需求标题、客户信息、处理状态、报价状态、合同状态、交付状态等），对需求进行状态转换（已提交、评估中、已报价、已签约、实施中、已完成），并能够导出需求数据。这是后台管理系统的核心功能之一，为业务团队提供需求管理和跟踪工具，提升需求处理效率和业务转化率。状态定义与客户端（我的需求）保持一致。



需求价值（补充对业务的价值）：

1. **提升需求管理效率**：通过统一的需求管理界面，管理员可以快速查看和管理所有需求，无需逐个查找，大幅提升管理效率。
2. **支持多维度搜索和筛选**：提供搜索功能（需求标题、客户名称）和状态筛选功能（全部、已提交、评估中、已报价、已签约、实施中、已完成），让管理员能够快速定位目标需求，特别是在需求数量较多时非常有用。状态定义与客户端（我的需求）保持一致。
3. **全流程状态跟踪**：通过多维度状态展示（处理状态、报价状态、合同状态、交付状态），管理员可以全面了解每个需求的当前进度，便于进行业务决策和资源调配。
4. **状态转换管理**：通过需求状态转换功能，管理员可以灵活调整需求状态，跟踪需求从提交到完成的整个生命周期，确保需求处理流程的规范性。
5. **数据导出功能**：支持导出需求数据，便于进行数据分析和报表制作，支持业务决策。
6. **为后续功能提供基础**：需求列表页作为需求管理的入口，为后续的需求详情查看、需求编辑等功能提供基础。



需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供需求列表展示**：以卡片形式清晰展示所有需求的基本信息，包括需求标题、客户信息、处理状态、报价状态、合同状态、交付状态、优先级、提交时间等。
2. **支持需求搜索**：提供搜索功能，支持按需求标题、客户名称进行搜索，帮助管理员快速定位目标需求。
3. **支持状态筛选**：提供状态筛选功能，支持按处理状态（全部、已提交、评估中、已报价、已签约、实施中、已完成）筛选需求。状态定义与客户端（我的需求）保持一致。
4. **支持需求状态转换**：提供状态转换功能，允许管理员将需求状态在已提交、评估中、已报价、已签约、实施中、已完成之间转换。状态定义与客户端（我的需求）保持一致。
5. **支持需求详情查看**：为每个需求提供查看详情入口，方便管理员查看需求的完整信息。
6. **支持数据导出**：支持将筛选后的需求数据导出，便于进行数据分析。
7. **支持分页浏览**：当需求数量较多时，通过分页功能分批次展示需求，提升页面加载速度和浏览体验。
8. **状态信息清晰**：通过多维度状态标签清晰标识需求的处理状态、报价状态、合同状态、交付状态，便于管理员快速了解需求进度。



用户故事（不同的视角下，希望的结果）：

**作为管理员，我希望：**
- 能够在一个页面中查看所有需求的基本信息，包括需求标题、客户信息、处理状态、报价状态、合同状态、交付状态、优先级、提交时间等。
- 能够通过搜索功能快速找到特定需求，支持按需求标题、客户名称进行搜索。
- 能够通过状态筛选功能，快速筛选出特定状态的需求。
- 能够对需求进行状态转换，将需求状态在已提交、评估中、已报价、已签约、实施中、已完成之间转换。状态定义与客户端（我的需求）保持一致。
- 能够点击查看详情按钮，进入需求的详情页面查看完整信息。
- 能够将筛选后的需求数据导出，便于进行数据分析。
- 当需求数量较多时，能够通过分页功能浏览不同页面的需求。

**作为业务顾问，我希望：**
- 能够快速查看分配给自己的需求，了解需求的详细信息和当前状态。
- 能够快速转换需求状态，标记需求的处理进度。
- 能够查看需求的多维度状态信息（处理状态、报价状态、合同状态、交付状态），全面了解需求进度。

**作为产品经理，我希望：**
- 需求管理页面功能完整，能够满足管理员和业务顾问的日常需求管理需求。
- 搜索和筛选功能高效准确，能够帮助用户快速定位目标需求。
- 状态转换功能简单直观，降低用户的操作成本，减少操作错误。
- 需求列表信息展示清晰，便于用户快速浏览和查找。
- 多维度状态展示清晰，便于用户全面了解需求进度。
- 页面性能良好，即使需求数量较多时也能流畅使用。

**作为业务方，我希望：**
- 通过需求管理功能，业务团队能够高效管理所有需求，提升需求处理效率。
- 通过搜索和筛选功能，业务团队能够快速响应客户的相关查询需求。
- 通过状态管理和状态转换功能，业务团队能够更好地跟踪需求进度，提升业务转化率。
- 通过数据导出功能，能够进行数据分析和报表制作，支持业务决策。



需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 页面采用垂直布局，包含以下主要区域（从上到下）：
  - 页面标题和操作栏（包含"需求管理"标题、总需求数、导出按钮）
  - 搜索和筛选区域（包含搜索框和状态筛选标签）
  - 需求列表区域（卡片形式展示需求信息）
  - 分页区域（显示分页信息和分页按钮）

**2. 页面标题和操作栏**
- 显示"需求管理"标题，字体较大（text-2xl），加粗显示
- 显示总需求数，格式："共 X 个需求"，数字高亮显示（indigo-600）
- 右侧显示"导出"按钮，点击导出当前筛选条件下的需求数据

**3. 搜索和筛选区域**
- **搜索框**：
  - 左侧显示搜索图标，灰色
  - 输入框占位符提示"搜索需求标题、客户名称"
  - 支持输入关键词进行搜索，支持搜索需求标题和客户名称
  - 输入时实时触发搜索（防抖300ms），自动应用筛选条件
- **状态筛选标签**：
  - 显示多个状态筛选按钮：全部、已提交、评估中、已报价、已签约、实施中、已完成
  - 状态定义与客户端（我的需求）保持一致：
    - 已提交：客户已提交需求，等待顾问处理
    - 评估中：顾问正在评估需求，进行需求分析和技术方案设计
    - 已报价：已向客户提交报价，等待客户确认
    - 已签约：报价已确认，合同已签署
    - 实施中：合同已签署，项目正在实施中
    - 已完成：项目已完成交付
  - 当前选中的状态按钮高亮显示（indigo-600背景，白色文字）
  - 未选中的状态按钮灰色背景，灰色文字
  - 点击状态筛选按钮，应用对应的状态筛选，更新需求列表

**4. 需求列表展示**
- **需求卡片结构**：
  - 每个需求以卡片形式展示，包含以下内容：
    - 需求标题（加粗显示）
    - 状态标签（处理状态标签，不同状态不同颜色）
    - 优先级标签（紧急、高、中、低，可选）
    - 多维度状态信息区域（处理状态、报价状态、合同状态、交付状态）
    - 客户信息（客户名称、业务类型、来源线索）
    - 需求描述（摘要，最多显示2行，超出部分省略）
    - 时间信息（提交时间、最后更新时间）
    - 操作按钮（转换状态、查看详情）
- **状态标签**：
  - 处理状态标签（与客户端保持一致）：
    - 已提交：黄色背景（yellow-100），黄色文字（yellow-600）
    - 评估中：蓝色背景（blue-100），蓝色文字（blue-600）
    - 已报价：靛蓝色背景（indigo-100），靛蓝色文字（indigo-600）
    - 已签约：紫色背景（purple-100），紫色文字（purple-600）
    - 实施中：青色背景（cyan-100），青色文字（cyan-600）
    - 已完成：绿色背景（green-100），绿色文字（green-600）
  - 优先级标签：
    - 紧急：红色背景（red-100），红色文字（red-600）
    - 高：橙色背景（orange-100），橙色文字（orange-600）
    - 中：灰色背景（gray-100），灰色文字（gray-600）
    - 低：蓝色背景（blue-100），蓝色文字（blue-600）
- **多维度状态信息区域**：
  - 显示在一个灰色背景的区域内，包含四个状态信息：
    - 处理状态：显示状态标签和负责顾问（如有）
    - 报价状态：显示状态标签（未报价/已报价/已确认）和报价金额（如有）
    - 合同状态：显示状态标签（未签署/待签署/已签署）
    - 交付状态：显示状态标签（未交付/进行中/已交付）
  - 各状态信息之间用竖线分隔
- **客户信息**：
  - 显示客户头像图标（圆形背景，indigo颜色）
  - 显示客户名称
  - 显示业务类型（如：企业服务、数字化转型、AI+RPA等）
  - 显示来源线索（如：来自线索：AI智能报价）
- **需求描述**：
  - 显示需求描述摘要，最多显示2行，超出部分用省略号显示
  - 支持点击卡片查看完整描述
- **时间信息**：
  - 显示提交时间，格式："提交于 YYYY-MM-DD HH:mm"
  - 如有最后更新时间，显示"最后更新 YYYY-MM-DD HH:mm"
  - 如有报价时间，显示"报价于 YYYY-MM-DD HH:mm"
  - 如有合同待签署信息，显示"合同待签署"
  - 如有实施进度，显示"实施进度 X%"
  - 如已完成，显示"完成于 YYYY-MM-DD HH:mm"
- **操作按钮**：
  - "转换状态"按钮：蓝色背景（indigo-600），点击弹出转换状态模态框
  - "查看详情"按钮：灰色背景，点击跳转到需求详情页（requirement-detail.html?id=x）

**5. 转换状态功能**
- **打开转换状态模态框**：
  - 点击需求卡片上的"转换状态"按钮，弹出转换状态模态框
  - 模态框显示半透明遮罩层，弹窗居中显示
  - 弹窗右上角有关闭按钮（X图标），点击可关闭弹窗
  - 模态框显示当前状态
- **状态选项**：
  - 提供状态选择：已提交、评估中、已报价、已签约、实施中、已完成（与客户端保持一致）
  - 每个状态选项显示状态标签和状态说明：
    - 已提交：客户已提交需求，等待顾问处理
    - 评估中：顾问正在评估需求，进行需求分析和技术方案设计
    - 已报价：已向客户提交报价，等待客户确认
    - 已签约：报价已确认，合同已签署
    - 实施中：合同已签署，项目正在实施中
    - 已完成：项目已完成交付
  - 当前状态选项禁用，不可选择，显示为灰色且不可点击
  - 其他状态选项可点击选择，选中后高亮显示（indigo-500边框，indigo-50背景）
- **状态转换**：
  - 选择新状态后，点击"确认转换"按钮，更新需求状态
  - 转换成功后，更新需求卡片的状态标签和状态数据
  - 更新筛选结果（如果当前筛选状态与新状态不一致，需求可能从列表中消失）
  - 显示成功提示
  - 关闭模态框
- **取消操作**：
  - 点击"取消"按钮或关闭按钮，关闭弹窗，不保存数据

**6. 查看详情功能**
- 点击需求卡片或"查看详情"按钮，跳转到需求详情页（requirement-detail.html?id=x）
- 传递需求ID参数，详情页根据ID加载需求完整信息

**7. 导出功能**
- **导出操作**：
  - 点击"导出"按钮，导出当前筛选条件下的需求数据
  - 显示加载状态
  - 导出数据包含以下字段：需求标题、客户名称、处理状态、报价状态、合同状态、交付状态、优先级、业务类型、提交时间、最后更新时间
  - 导出文件格式：CSV或Excel，文件名格式："需求列表_YYYY-MM-DD.csv"
  - 导出成功后，显示成功提示

**8. 分页功能**
- **分页信息**：
  - 显示当前页数据范围，格式："显示 X 到 Y 条，共 Z 条"
  - 显示总需求数（与筛选后的结果一致）
- **分页按钮**：
  - "上一页"按钮：第一页时禁用（disabled状态）
  - 页码按钮：显示当前页码和相邻页码（如：1、2、3）
  - 当前页码高亮显示（indigo-600背景，白色文字）
  - "下一页"按钮：最后一页时禁用
- **分页交互**：
  - 点击页码按钮，跳转到对应页面，更新需求列表显示
  - 点击"上一页"或"下一页"按钮，跳转到上一页或下一页
  - 切换页面时，保持当前的搜索和筛选条件

**9. 数据加载规则**
- 页面加载时，调用后端接口获取需求列表数据
- 支持分页参数，每页显示10条数据（可根据实际需求调整）
- 搜索时，调用后端接口，传递搜索关键词参数
- 筛选时，调用后端接口，传递筛选条件参数
- 状态转换后，刷新需求列表，显示最新数据

**10. 空状态处理**
- 当筛选后无结果时，显示空状态提示
- 空状态显示图标、提示文字："暂无需求数据"、"请尝试调整筛选条件或搜索关键词"

**11. 异常处理**
- 如果后端接口请求失败，显示友好的错误提示
- 如果搜索无结果，显示空状态提示
- 如果需求列表为空，显示空状态提示
- 确保页面在各种异常情况下都能正常显示基本内容

**12. 响应式设计**
- 页面支持响应式布局，适配不同屏幕尺寸
- 移动端优化：需求卡片垂直布局，按钮全宽显示，筛选标签支持横向滚动
- 移动端优化：多维度状态信息区域支持换行显示

**13. 交互体验**
- 需求卡片支持点击跳转到详情页（除按钮区域外）
- 需求卡片hover效果：背景色变为灰色（gray-50）
- 按钮点击反馈正常，有hover效果
- 模态框打开和关闭动画流畅
- 搜索防抖功能正常，不会频繁触发请求



验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 页面标题"需求管理"正确显示，字体大小和样式符合设计要求
- [ ] 总需求数正确显示，格式为"共 X 个需求"
- [ ] "导出"按钮正确显示在标题右侧，样式符合设计要求
- [ ] 搜索和筛选区域正确显示，布局合理
- [ ] 需求列表卡片正确显示，布局合理
- [ ] 分页区域正确显示在列表下方

**2. 搜索功能验收**
- [ ] 搜索框正确显示，占位符提示正确
- [ ] 输入搜索关键词后，实时触发搜索（防抖300ms），正确应用筛选条件
- [ ] 搜索结果正确显示在需求列表中
- [ ] 搜索无结果时，显示空状态提示

**3. 状态筛选功能验收**
- [ ] 状态筛选标签正确显示：全部、已提交、评估中、已报价、已签约、实施中、已完成（与客户端保持一致）
- [ ] 当前选中的状态按钮正确高亮显示
- [ ] 点击状态筛选按钮，正确应用对应的状态筛选，更新需求列表
- [ ] 状态筛选与搜索正确组合应用

**4. 需求列表展示验收**
- [ ] 需求卡片正确显示，包含所有必需信息：需求标题、状态标签、优先级标签、多维度状态信息、客户信息、需求描述、时间信息、操作按钮
- [ ] 处理状态标签正确显示，颜色和样式符合设计要求
- [ ] 优先级标签正确显示（如有），颜色和样式符合设计要求
- [ ] 多维度状态信息区域正确显示：处理状态、报价状态、合同状态、交付状态
- [ ] 客户信息正确显示：客户头像图标、客户名称、业务类型、来源线索
- [ ] 需求描述正确显示，最多显示2行，超出部分用省略号显示
- [ ] 时间信息正确显示：提交时间、最后更新时间、报价时间、合同待签署信息、实施进度、完成时间等

**5. 转换状态功能验收**
- [ ] 点击"转换状态"按钮，正确弹出转换状态模态框
- [ ] 模态框显示半透明遮罩层，弹窗居中显示
- [ ] 模态框显示当前状态，当前状态选项禁用
- [ ] 状态选项正确显示，包含状态标签和状态说明
- [ ] 选择新状态后，点击"确认转换"按钮，正确更新需求状态
- [ ] 转换成功后，正确更新需求卡片的状态标签和状态数据
- [ ] 正确更新筛选结果
- [ ] 显示成功提示
- [ ] 点击"取消"按钮或关闭按钮，正确关闭弹窗，不保存数据

**6. 查看详情功能验收**
- [ ] 点击需求卡片或"查看详情"按钮，正确跳转到需求详情页（requirement-detail.html?id=x）
- [ ] 正确传递需求ID参数

**7. 导出功能验收**
- [ ] 点击"导出"按钮，正确导出当前筛选条件下的需求数据
- [ ] 显示加载状态
- [ ] 导出数据包含所有必需字段：需求标题、客户名称、处理状态、报价状态、合同状态、交付状态、优先级、业务类型、提交时间、最后更新时间
- [ ] 导出文件格式正确：CSV或Excel，文件名格式正确："需求列表_YYYY-MM-DD.csv"
- [ ] 导出成功后，显示成功提示

**8. 分页功能验收**
- [ ] 分页信息正确显示，格式为"显示 X 到 Y 条，共 Z 条"
- [ ] 分页按钮正确显示：上一页、页码、下一页
- [ ] 当前页码正确高亮显示（indigo-600背景，白色文字）
- [ ] 第一页时，"上一页"按钮禁用
- [ ] 最后一页时，"下一页"按钮禁用
- [ ] 点击页码按钮，正确跳转到对应页面，更新需求列表显示
- [ ] 点击"上一页"或"下一页"按钮，正确跳转到上一页或下一页
- [ ] 切换页面时，正确保持当前的搜索和筛选条件

**9. 数据加载验收**
- [ ] 页面加载时，正确调用后端接口获取需求列表数据
- [ ] 需求列表数据正确显示在卡片中
- [ ] 分页参数正确传递，每页数据量符合要求（10条）
- [ ] 搜索时，正确调用后端接口，传递搜索关键词参数
- [ ] 筛选时，正确调用后端接口，传递筛选条件参数
- [ ] 状态转换后，正确刷新需求列表，显示最新数据

**10. 空状态处理验收**
- [ ] 筛选后无结果时，正确显示空状态提示
- [ ] 空状态显示图标和提示文字："暂无需求数据"、"请尝试调整筛选条件或搜索关键词"

**11. 异常处理验收**
- [ ] 后端接口请求失败时，显示友好的错误提示
- [ ] 搜索无结果时，显示空状态提示
- [ ] 需求列表为空时，显示空状态提示
- [ ] 页面在各种异常情况下都能正常显示基本内容

**12. 响应式设计验收**
- [ ] 页面支持响应式布局，适配不同屏幕尺寸
- [ ] 移动端优化：需求卡片垂直布局，按钮全宽显示，筛选标签支持横向滚动
- [ ] 移动端优化：多维度状态信息区域支持换行显示
- [ ] 模态框在移动端正确显示，宽度和高度适配屏幕

**13. 交互体验验收**
- [ ] 需求卡片支持点击跳转到详情页（除按钮区域外）
- [ ] 需求卡片hover效果正常，背景色变化
- [ ] 按钮点击反馈正常，有hover效果
- [ ] 模态框打开和关闭动画流畅
- [ ] 页面加载流畅，无卡顿现象
- [ ] 搜索防抖功能正常，不会频繁触发请求

**14. 性能要求**
- [ ] 页面加载时间不超过2秒
- [ ] 搜索响应时间不超过1秒
- [ ] 筛选操作响应及时，无延迟感
- [ ] 分页切换流畅，无卡顿现象
- [ ] 状态转换操作响应及时，无延迟感